<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-card shadow="hover">
          <div id="lineChart" style="height: 250px"></div>
        </el-card>
      </el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple-light" />
        <el-card shadow="hover">
          <div id="barChart" style="height: 250px"></div> </el-card
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-card shadow="hover"
          ><div id="pieChart" style="height: 250px"></div></el-card
      ></el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { loading } from '@/utils/loading'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { EChartsOption, init } from 'echarts'
import { bottom } from '@popperjs/core'

onMounted(() => {
  // 获取dom，断言HTMLElement类型，否则会报错
  const chartLine: HTMLElement = document.getElementById(
    'lineChart'
  ) as HTMLElement
  const chartBar: HTMLElement = document.getElementById(
    'barChart'
  ) as HTMLElement
  const chartPie: HTMLElement = document.getElementById(
    'pieChart'
  ) as HTMLElement
  if (chartLine) {
    const chart1 = init(chartLine)
    const option1: EChartsOption = {
      title: {
        text: '公司业绩',
      },
      xAxis: {
        type: 'category',
        data: [
          '2020.12',
          '2021.2',
          '2021.5',
          '2021.8',
          '2021.11',
          '2022.2',
          '2022.5',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
      grid: [
        {
          right: 0,
          bottom: 20,
        },
      ],
    }
    window.addEventListener('resize', function () {
      chart1.resize()
    })
    option1 && chart1.setOption(option1)
    var l=new NodeList()
    l.
    // 柱状图
    const chart2 = init(chartBar)
    const option2 = {
      title: {
        text: '公司各部门成员',
      },
      xAxis: {
        type: 'category',
        data: ['人事', '研发', '产品', '测试', '运维', 'UI', '策划'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        },
      ],
      grid: [
        {
          right: 0,
          bottom: 20,
        },
      ],
    }
    window.addEventListener('resize', function () {
      chart2.resize()
    })
    option2 && chart2.setOption(option2)

    // 公司架构
    const chart3 = init(chartPie)
    const option3 = {
      title: {
        text: '公司架构',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%',
      },
      toolbox: {
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      legend: {
        data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
      },
      textStyle: {
        fontSize: 15,
      },
      series: [
        {
          name: 'Funnel',
          type: 'funnel',
          left: '0%',
          top: 40,
          bottom: 0,
          width: '100%',
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside',
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid',
            },
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          emphasis: {
            label: {
              fontSize: 20,
            },
          },
          data: [
            { value: 30, name: '大股东(疑似控股人)' },
            { value: 50, name: '股东' },
            { value: 60, name: '员工' },
            { value: 40, name: '执行董事' },
          ],
        },
      ],
    }
    window.addEventListener('resize', function () {
      chart3.resize()
    })
    option3 && chart3.setOption(option3)
  }
})
</script>
<style lang="scss"></style>
